<template>
  <!-- 轮播功能组件 -->
  <div class="banner">
    <img v-for="(v, i) in items" :key="i" :src="v" v-show="cur == i" />
    <div class="banner-circle">
      <ul>
        <li
          v-for="(v, i) in items"
          :key="i"
          :class="cur == i ? 'selected' : ''"
        ></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Banner",
  data() {
    return {
      cur: 0,
      timer: null,
    };
  },
  props: {
    items: Array,
    default: function () {
      return [require("@/assets/img/1.jpg")];
    },
  },
  methods: {
    // 定时器
    autoPlay() {
      this.timer = setInterval(this.play, 2000); //定时器
    },
    play() {
      this.cur++;
      if (this.cur == this.items.length) {
        this.cur = 0;
      }
    },
  },
  // 生命周期
  mounted() {
    // 挂载完成
    this.autoPlay();
  },
  destroyed() {
    // 清除定时器
    clearInterval(this.timer);
  },
};
</script>

<style>
</style>